<template>
    <div class="home">
    <header class="header">
        <div class="title">旅梦后台管理</div>
        <div class="use-info">欢迎 admin</div>

    </header>
    <section class="body">
        <aside class="menu">
            <ul>
                <li class="menu-item" v-for="(item,index) in menu" :key="item.id">
                    <router-link :to="item.path">{{item.name}}</router-link>
                </li>
            </ul>
        </aside>
        <main class="main">
            <RouterView></RouterView>
        </main>
    </section>
</div>
</template>

<script setup>
    import {ref} from 'vue'
    const menu = ref([
        {id: 1, name: '班级管理', path: '/class'},
        {id: 2, name: '讲师列表', path: '/teacher'},
        {id: 3, name: '就业统计', path: '/job'}
    ])
</script>

<style lang="css" scoped>
    .home{
        height: 100vh;
    }
    .header {
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;    
        background-color: #6e95f6;
        padding: 0 30px;
        color: #fff;
        font-size: 22px;

    }
    .title{
        font-size: 30px;
    }
    .body{
        display: flex;
        height: calc(100vh - 80px);
        
    }
    .menu{
        width: 180px;
        background-color: #5e7fd4;
    }
    .menu-item{
        height: 50px;
    }
    .menu-item a{
        color: #fff;
        font-size: 20px;
        text-decoration: none;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 50px;

    }
    .menu-item a:hover{
        background-color: #5270bb;

    }
</style>